<template>
  <el-dialog title="预览" width="800px" v-model="dialogFormVisible">
    <div class="d-s-s">
      <!--主摄像头-->
      <div class="camera-show">
        <!-- <video _ngcontent-iqc-c349="" id="monitorVideo" autoplay="autoplay">
                    <source _ngcontent-iqc-c349="" src="rtsp://admin:zhbit000123@192.168.1.64:554/Streaming/Channels/101?transportmode=unicast"
                        type="video/mp4">
                    <source _ngcontent-iqc-c349="" src="mov_bbb.ogg" type="video/ogg"> 您的浏览器不支持 HTML5 video 标签。
                </video> -->
        <!-- <object classid="clsid:E23FE9C6-778E-49D4-B537-38FCDE4887D8" codebase="rtsp://admin:zhbit000123@192.168.1.64:554/Streaming/Channels/101?transportmode=unicast"
width="100%" height="100%" events="True" id="vlc2"></object> -->
        <!-- <video
                    src="rtsp://admin:zhbit000123@192.168.1.64:554/Streaming/Channels/101?transportmode=unicast"></video> -->
        <video src="https://www.runoob.com/try/demo_source/mov_bbb.mp4"></video>
      </div>
      <div class="camera-control">
        <div class="other-camera">
          <video _ngcontent-iqc-c349="" id="monitorVideo" autoplay="autoplay">
            <source
              _ngcontent-iqc-c349=""
              src="https://www.runoob.com/try/demo_source/mov_bbb.mp4"
              type="video/mp4"
            />
            您的浏览器不支持 HTML5 video 标签。
          </video>
        </div>
        <!--控制摄像头角度-->
        <div class="control-box">
          <div
            :class="item.className"
            v-for="(item, index) in controls"
            :key="index"
          >
            <el-button size="small" @click="controlFunc(item)">-</el-button>
          </div>
        </div>
        <!--调节-->
        <div class="adjust-box">
          <div class="d-s-c" v-for="(item, index) in sliders" :key="index">
            <div class="key">{{ item.title }}</div>
            <div class="val">
              <el-slider v-model="lightVal"></el-slider>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import Upload from "@/components/upload/Upload.vue";
export default {
  components: {
    Upload,
  },
  data() {
    return {
      //是否显示
      dialogFormVisible: false,
      //亮度
      lightVal: 0,
      //控制集合
      controls: [
        {
          className: "item left-top",
          iconName: "arrow-up",
        },
        {
          className: "item",
          iconName: "arrow-up",
        },
        {
          className: "item right-top",
          iconName: "arrow-up",
        },
        {
          className: "item",
          iconName: "arrow-left",
        },
        {
          className: "item",
          iconName: "reload",
        },
        {
          className: "item",
          iconName: "arrow-right",
        },
        {
          className: "item left-bottom",
          iconName: "arrow-down",
        },
        {
          className: "item",
          iconName: "arrow-down",
        },
        {
          className: "item right-bottom",
          iconName: "arrow-down",
        },
      ],
      //调节
      sliders: [
        {
          id: 1,
          title: "亮度",
          value: 0,
        },
        {
          id: 2,
          title: "对比度",
          value: 0,
        },
        {
          id: 3,
          title: "饱和度",
          value: 0,
        },
        {
          id: 4,
          title: "色度",
          value: 0,
        },
      ],
    };
  },
  props: {
    visible: Boolean,
  },
  watch: {
    //监听是否显示
    visible(newVal, oldVal) {
      if (newVal != oldVal) {
        this.dialogFormVisible = newVal;
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    /**
     * 确认
     */
    confirmFunc() {
      this.$message({
        type: "success",
        message: "操作成功!",
      });
      this.cancelFunc();
    },

    /**
     * 取消
     */
    cancelFunc() {
      this.$emit("close", false);
    },
  },
};
</script>

<style lang="scss">
.camera-show {
  flex-grow: 1;
  flex-shrink: 1;
  &::before {
    content: "";
    padding-top: 56.25%;
    float: left;
  }
  &::after {
    content: "";
    display: block;
    clear: both;
  }
  video {
    width: 100%;
    height: 100%;
  }
}
.camera-control {
  padding: 10px;
  margin-left: 20px;
  flex-basis: 202px;
  border: 1px solid #ddd;
  .other-camera {
    &::before {
      content: "";
      padding-top: 56.25%;
      float: left;
    }
    &::after {
      content: "";
      display: block;
      clear: both;
    }
    video {
      width: 100%;
      height: 100%;
    }
  }
  .control-box {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
  }
  .item {
    padding: 2px;
    &.left-top .anticon {
      transform: rotate(-45deg);
    }
    &.right-top .anticon {
      transform: rotate(45deg);
    }
    &.left-bottom .anticon {
      transform: rotate(45deg);
    }
    &.right-bottom .anticon {
      transform: rotate(-45deg);
    }
  }
  .ant-btn-icon-only {
    width: 56px;
  }
}
.adjust-box {
  padding-top: 20px;
  .key {
    flex-basis: 50px;
  }
  .val {
    flex-grow: 1;
  }
}
</style>
